<template>
  <div style="padding:30px 40px;">
    <a-form style="margin-top:30px;">
      <a-row :gutter="20">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="批次号" v-model="query.data.externalFields" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset='1' style="padding:0;">
          <a-form-item>
            <a-input placeholder="账户名称" v-model="query.data.mainMemberName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset='1'>
          <a-form-item>
            <a-input placeholder="账号后四位" v-model="query.data.externalAccountNo" />
          </a-form-item>
        </a-col>

        <a-col :span="4" :offset='1'>
          <a-form-item>
            <a-select placeholder="交易状态" :options="statusList" v-model="query.data.status"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset='1'>
          <a-form-item>
            <a-date-picker style="width:100%;" placeholder="交易时间" format="YYYYMMDD" @change="onChange"
              v-model="momentDate" :allowClear="isClear" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px;">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button class="button_sty" type="primary" :loading="loading" @click="handleSearch">查询</a-button>
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset">重置</a-button>
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="conexport">导出</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <!-- <p>
      总计
      <span class="amountColor amountSize">{{count}}</span>笔 ，成功
      <span class="amountColor amountSize">{{payedCount}}</span>笔 ， 成功金额
      <span class="amountColor amountSize">{{(totalAmount/100).toFixed(2)}}</span>元
    </p> -->
    <a-table size="middle" :scroll="{ y: '38vh' }" :columns="columns2" :dataSource="list" :pagination="false"
      :rowKey="record => record.merchantOrderNo">
      <span slot="batchNo" slot-scope="record">
        {{record.externalFields.batchNo}}
      </span>
      <span slot="externalAccountNo" slot-scope="record">
        {{record.externalAccountNo | AccountNofilter}}
      </span>
      <span slot="action" slot-scope="text">
        <span @click='goDetail(text.transOrderNo)' style="color:#1890ff;">详细</span>
      </span>

      <!-- <span slot="externalAccountNo" slot-scope="record">
        {{(record | AccountNofilter}}
      </span> -->
      <span slot="transTime" slot-scope="record">
        {{record.transTime | timeFilter}}
      </span>
      <span slot="amount" slot-scope="record">
        {{(record.amount/100).toFixed(2)}}
      </span>
    </a-table>
    <a-pagination @change="onPageChange" :current="pagination.current" :total="pagination.total"
      :pageSize="query.pageSize" style="margin-top: 10px" />
    <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="gologin">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";

  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import moment from "moment";
  import api from "@/common/api";
  const ATabPane = ATabs.TabPane;

  const columns2 = [
    { title: "批次号", scopedSlots: { customRender: "batchNo" }, width: '10%', align: 'center' },
    { title: "交易日期", dataIndex: "transDate", width: '10%', align: 'center' },
    { title: "交易时间", scopedSlots: { customRender: "transTime" }, width: '10%', align: 'center' },
    { title: "账户名称", dataIndex: "mainMemberName", width: '15%', align: 'center' },
    { title: "账号", scopedSlots: { customRender: "externalAccountNo" }, width: '20%', align: 'center' },
    { title: "交易金额(元)", scopedSlots: { customRender: "amount" }, width: '15%', align: 'center' },
    { title: "交易状态", dataIndex: "statusName", width: '10%', align: 'center' },
    { title: "操作", scopedSlots: { customRender: "action" }, width: '10%', align: 'center' },
  ];

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      ATabPane,
      ATabs,
      AForm
    },
    data() {
      return {
        today: new Date(),
        list: [],
        momentDate: moment(new Date()),
        statusList: [
          { label: "全部", value: "all" },
          { label: "下单中", value: "ordering" },
          { label: "待支付", value: "ordered" },
          { label: "交易成功", value: "payed" },
          { label: "提现失败", value: "failed" },
          { label: "状态不明", value: "notconfirmed" }
        ],
        columns2,
        isClear: false,
        query: {
          data: {
            externalFields: "",
            externalAccountNo: "",
            mainMemberName: "",
            status: "all",
            transDate: ""
          },
          page: 1,
          pageSize: 10
        },
        pagination: { current: null, total: null },
        visible: false,
        form: this.$form.createForm(this),
        error: "",
        loginpwd: "",
        loginpwd2: "",
        login: false,
        count: null,
        payedCount: null,
        totalAmount: null,
        loading: false,
        pagination: { current: null, total: null },
        visible: false,
        form: this.$form.createForm(this),
        error: "",
        loginpwd: "",
        loginpwd2: "",
        login: false,
        count: null,
        payedCount: null,
        totalAmount: null,
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 18 },
            md: { span: 18 }
          }
        }
      };
    },
    filters: {
      nameFilter(value) {
        if (value) {
          return '*' + value.substring(1, value.length)
        }
        return ''
      },
      phoneFilter(value) {
        if (value) {
          return value.substring(0, 3) + '****' + value.substring(7, value.length)
        }
        return ''
      },

      timeFilter: function (value) {
        if (value) {
          let year = value.substring(0, 2)
          let mouth = value.substring(2, 4)
          let day = value.substring(4, 6)
          return year + ':' + mouth + ':' + day;
        }
      },
      AccountNofilter(value) {
        if (value) {
          var reg = /.*(.{4})$/;
          return value.replace(reg, "**** **** **** ***$1");
        }
      },
      cashfilter(value) {
        return parseFloat(value / 100).toFixed(2) + '元';
      }
    },
    watch: {},
    computed: {},
    mounted() {
      this.handleSearch();
      // this.statusQuery();
      var date = new Date();
      var month = date.getMonth();
      var dates = date.getDate();

      if (date.getMonth() < 9) {
        month = "0" + parseInt(month + 1);
      } else {
        month = month + 1;
      }
      if (date.getDate() <= 9) {
        dates = "0" + date.getDate();
      }
      this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
    },
    methods: {
      moment,
      onChange(dates, dateStrings) {
        this.query.data.transDate = dateStrings;
      },
      onPageChange: function (page, pageSize) {
        console.info(page, pageSize);
        this.query.page = page;
        this.query.pageSize = pageSize;
        this.handleSearch();
      },
      reset() {
        this.today = new Date();
        this.query.data = {};
        var date = new Date();
        this.momentDate = moment(date);
        var month = date.getMonth();
        var dates = date.getDate();
        if (date.getMonth() < 9) {
          month = "0" + parseInt(month + 1);
        } else {
          month = month + 1;
        }
        if (date.getDate() <= 9) {
          dates = "0" + date.getDate();
        }
        this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
      },
      conexport() {
        console.info(this.query.data);
        this.$axios
          .post("/agent/transaction/fetchExportQueryApi", this.query.data)
          .then(res => {
            let token = localStorage.getItem("token");
            let downloadUrl =
              "/agent/transaction/excelDownloadApi?Authorization=" + token;
            location.href = downloadUrl;
          });
      },
      goDetail(id) {
        this.$router.push(`/org/transmanage/${id}/payquerydetail`)
      },
      callback() { },
      handleSearch() {
        this.loading = true;
        console.info(this.query);
        api.coustromPaymentOrg(this.query, res => {
          console.info(res);
          if (res.code == "OK") {
            this.loading = false;
            this.list = res.list;
            for (var idx in this.list) {
              this.list[idx].externalFields = JSON.parse(
                this.list[idx].externalFields
              );
            }
            this.pagination.current = res.current;
            this.pagination.total = res.total;
            // this.count = res.data.count; //总笔数
            // this.payedCount = res.data.payedCount; //成功笔数
            // this.totalAmount = res.data.totalAmount; //总金额
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            return false;
          }
        });
        // handleChange(value) {
        //   console.log(value);
        // },
      },
      gologin() {
        this.visible = false;
        this.$router.push("/home");
      },
      //交易状态查询
      statusQuery() {
        let data = {
          groupCode: "posp_trans_status"
        }
        api.statusQuery(data, res => {
          console.log(res)
          if (res.code == "OK") {
            let statusList = res.list;
            this.statusList = [
              { value: "all", label: "全部" }
            ]
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label
              }
              this.statusList.push(itemList)
            })
          } else {

          }
        }, err => {

        })
      },
    }
  };
</script>

<style lang="less" scoped>
  span {
    cursor: pointer;
  }

  .formGroupTitle {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .ant-tabs-nav {
    float: right;
  }

  .amountColor {
    color: #29a576;
    font-weight: 400;
  }

  .amountSize {
    font-size: 20px;
    padding: 0 5px;
  }

  .expand {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .button_sty {
    width: 100%;
  }
</style>